<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.68.3" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>router &middot; 我的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0b ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/my_technology_blog/"><h1>我的博客</h1></a>
      <p class="lead">
       杨博的博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/my_technology_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2021. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>router</h1>
  <time datetime=2019-05-23T00:00:00Z class="post-date">Thu, May 23, 2019</time>
  <div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python">        {
            <span style="color:#f92672">//</span> a为局部变量
          let a <span style="color:#f92672">=</span> <span style="color:#ae81ff">1</span>;
            <span style="color:#f92672">//</span> b为全局变量
          var b <span style="color:#f92672">=</span> <span style="color:#ae81ff">2</span>;
        }
            <span style="color:#f92672">//</span> b不会报错
          console<span style="color:#f92672">.</span>log(b);
            <span style="color:#f92672">//</span> a会报错<span style="color:#960050;background-color:#1e0010">，因为作用域</span>
          console<span style="color:#f92672">.</span>log(a);
</code></pre></div><p>跳转</p>
<p>router-link</p>
<p><!-- raw HTML omitted -->跳转到hello<!-- raw HTML omitted --></p>
<ul>
<li>
<p>tag:指定渲染成什么标签.</p>
<ul>
<li>默认是<!-- raw HTML omitted --></li>
<li>显示按钮效果：<!-- raw HTML omitted -->hello button<!-- raw HTML omitted --></li>
</ul>
</li>
<li>
<p>replace:不会留下历史记录，浏览器的后退按钮不可用。</p>
<ul>
<li>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">&lt;<span style="color:#f92672">router-link</span> <span style="color:#a6e22e">to</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/hello&#34;</span> <span style="color:#a6e22e">tag</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;li&#34;</span> <span style="color:#a6e22e">replace</span>&gt;<span style="color:#a6e22e">hello</span> <span style="color:#a6e22e">li</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/router-link&gt;</span>
</code></pre></div></li>
</ul>
</li>
<li>
<p>按钮跳转
<!-- raw HTML omitted -->跳转到hello<!-- raw HTML omitted --></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"> <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
   <span style="color:#a6e22e">handleRouter</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span> () {
     <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$router</span>.<span style="color:#a6e22e">push</span>(<span style="color:#e6db74">&#39;/hello&#39;</span>)
   }
}
</code></pre></div><ul>
<li>$router还有一些方法：
<ul>
<li>
<p>replace，跳转后，不会留下历史记录。</p>
</li>
<li>
<p>go,类似于window.history.go(),在history向前或向后多少步，参数是整数。
<!-- raw HTML omitted -->后退<!-- raw HTML omitted -->
<!-- raw HTML omitted -->
<!-- raw HTML omitted -->前进<!-- raw HTML omitted --></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">  <span style="color:#a6e22e">back</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span> () {
    <span style="color:#75715e">// 后退2步
</span><span style="color:#75715e"></span>    <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$router</span>.<span style="color:#a6e22e">go</span>(<span style="color:#f92672">-</span><span style="color:#ae81ff">2</span>);
  },
  <span style="color:#a6e22e">next</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span> () {
    <span style="color:#75715e">// 前进1步
</span><span style="color:#75715e"></span>    <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$router</span>.<span style="color:#a6e22e">go</span>(<span style="color:#ae81ff">1</span>);
  }
</code></pre></div></li>
</ul>
</li>
</ul>
</li>
</ul>
<ol>
<li>
<p>不带参数</p>
<p><!-- raw HTML omitted -->
<!-- raw HTML omitted --> //name,path都行, 建议用name
// 注意：router-link中链接如果是&rsquo;/&lsquo;开始就是从根路由开始，如果开始不带&rsquo;/'，则从当前路由开始。</p>
</li>
<li>
<p>带参数</p>
<p><!-- raw HTML omitted -->
// params传参数 (类似post)
// 路由配置 path: &ldquo;/home/:id&rdquo; 或者 path: &ldquo;/home:id&rdquo;
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
<!-- raw HTML omitted -->
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id</p>
</li>
</ol>
<p>vue-router高级用法</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#75715e">// main.js
</span><span style="color:#75715e"></span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">beforeEach</span>((<span style="color:#a6e22e">to</span>, <span style="color:#a6e22e">from</span>, <span style="color:#a6e22e">next</span>)=&gt;{
  <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">token</span> <span style="color:#f92672">=</span> window.<span style="color:#a6e22e">localStorage</span>.<span style="color:#a6e22e">getItem</span>(<span style="color:#e6db74">&#34;token&#34;</span>);
  <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">token</span><span style="color:#f92672">!=</span><span style="color:#66d9ef">null</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">token</span><span style="color:#f92672">!=</span><span style="color:#e6db74">&#34;&#34;</span>)
  {
    <span style="color:#75715e">// 进入下一个钩子
</span><span style="color:#75715e"></span>    <span style="color:#a6e22e">next</span>();
  }<span style="color:#66d9ef">else</span>{
    <span style="color:#75715e">// 跳转
</span><span style="color:#75715e"></span>    <span style="color:#a6e22e">next</span>(<span style="color:#e6db74">&#39;/rd&#39;</span>);
  }
})
</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">whitelist</span> <span style="color:#f92672">=</span> [<span style="color:#e6db74">&#39;Login&#39;</span>];

<span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">beforeEach</span>((<span style="color:#a6e22e">to</span>, <span style="color:#a6e22e">from</span>, <span style="color:#a6e22e">next</span>)=&gt;{
    <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;beforeEach&#39;</span>);
    <span style="color:#75715e">// console.log(to);
</span><span style="color:#75715e"></span>    <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">from</span>);
    <span style="color:#75715e">// next跳转到下一个页面
</span><span style="color:#75715e"></span>    <span style="color:#75715e">// next();
</span><span style="color:#75715e"></span>
    <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">token</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">localStorage</span>.<span style="color:#a6e22e">getItem</span>(<span style="color:#e6db74">&#34;token&#34;</span>);
    <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">to</span>.<span style="color:#a6e22e">name</span>);
    <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">whitelist</span>);
    <span style="color:#75715e">// 用户访问权限。用户未登录，只可以访问登录页。
</span><span style="color:#75715e"></span>    <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">whitelist</span>.<span style="color:#a6e22e">indexOf</span>(<span style="color:#a6e22e">to</span>.<span style="color:#a6e22e">name</span>) <span style="color:#f92672">&gt;</span> <span style="color:#f92672">-</span><span style="color:#ae81ff">1</span>)
    {
      <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;在白名单中！&#34;</span>);
      <span style="color:#a6e22e">next</span>();
    }
    <span style="color:#75715e">// 判断用户登录状态
</span><span style="color:#75715e"></span>    <span style="color:#66d9ef">else</span>
    {
      <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;非白名单！&#34;</span>);
      <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">token</span><span style="color:#f92672">==</span><span style="color:#66d9ef">null</span>)
      {
        <span style="color:#a6e22e">alert</span>(<span style="color:#e6db74">&#39;请您登录后访问&#39;</span>);
        <span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">push</span>({<span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;Login&#39;</span>})
      }
      <span style="color:#66d9ef">else</span>
      {
        <span style="color:#a6e22e">next</span>();
      }
    }
});
</code></pre></div><p>​</p>

</div>


    </main>

    
  </body>
</html>
